<template>
	<div class="lexmis-Spinner" :style="containerStyle">
		<div v-for="i in count" :key="i" :style="cellStyles[i-1]"></div>
	</div>
</template>

<script>
/**
 * @author 唐国雄
 * 加载中图标
 * 属性----------------------
 * :size		点大小
 * :count		点数量
 * :radius		旋转半径
 * :duration	动画周期
 * :interval	点旋转间隔时间
 */
export default {
	name:'Spinner',
	props:{
		//点大小
		size:{
			type:Number,
			default:6,
		},
		//点数量
		count:{
			type:Number,
			default:5,
		},
		//旋转半径
		radius:{
			type:Number,
			default:20,
		},
		//动画周期
		duration:{
			type:Number,
			default:2,
		},
		//点旋转间隔时间
		interval:{
			type:Number,
			default:0.25,
		}
	},
	computed:{
		cellStyles(){
			const {size,count,radius,duration,interval}=this;
			const result=[];
			for(let i=0;i<count;++i){
				result.push({
					width:size+'px',
					height:size+'px',
					top:0,
					left:`calc(50% - ${size/2}px)`,
					transformOrigin:`50% ${radius+size/2}px`,
					animationDuration:duration+'s',
					animationDelay:i*interval+'s',
				});
			}
			return result;
		},
		containerStyle(){
			const distance=this.size+this.radius*2+'px';
			return {
				width:distance,
				height:distance,
			};
		},
	},
};
</script>

<style lang="scss">
@keyframes rotation{
	0%{transform:rotate(0deg);}
	45%{transform:rotate(270deg);animation-timing-function:linear;}
	100%{transform:rotate(360deg);animation-timing-function:linear;}
}
.lexmis-Spinner{
	position:relative;
	>div{
		position:absolute;
		background:#1976d2;
		border-radius:50%;
		animation:rotation infinite;
		animation-timing-function:cubic-bezier(0.7,0.2,0.5,0.8);
	}
}
</style>
